<template>
    <p>钱包余额:{{ wallet }}</p>
    <el-input v-model="input" style="width: 240px" placeholder="药品编号 例：YP001" />
    <el-button type="primary" @click="inquire">查询</el-button>

    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column property="code" label="药品编号" width="120" />
        <!-- <el-table-column property="drugname" label="药品名称" show-overflow-tooltip /> -->
        <el-table-column property="name" label="订单名" width="120" />
        <el-table-column property="number" label="数量" show-overflow-tooltip />
        <el-table-column property="orderState" label="状态" width="120" />
        <!-- 操作 -->
        <el-table-column label="操作">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">删除订单</el-button>
                <el-button size="small" @click="uapadateOrderStatus(scope.row)">退单</el-button>
            </template>
        </el-table-column>

    </el-table>
    <div style="margin-top: 20px">
        <!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])">结算</el-button> -->
        <!-- <el-button @click="toggleSelection()">加入购物车</el-button> -->
        <el-button @click="">支付</el-button>
    </div>

</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElTable } from 'element-plus'
import axios from 'axios';

interface User {
    id: number//订单id
    drugId: number; //药品表id  
    code: String;//订单号
    name: String;//订单名
    number: number;//药品数量
    orderState: String //订单状态
}
//定义新的方法
const input = ref("")
const num = ref([]);
const tableData = ref([]);
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const wallet: number = 7989;

// 查询
const inquire = () => {
    axios({
        method: "post",
        url: `http://localhost:8080/findme`,
        headers: {
            "Content-Type": "application/json",
        },
        data: { code: input.value },
    }).then((res) => {
        console.log(res)
        tableData.value = res.data.data;
        num.value = res.data.data.map(i => 1);
    }).catch((err) => {
        console.log(
            "err.response.data",
            err.response,
            err.response.data,
            err.response.data.data,
            err.response.data.msg
        );
    });
}

// 结算
const toggleSelection = (rows?: User[]) => {
    console.log(multipleSelection.value)
    multipleSelection.value.forEach(item => {
        console.log(item.id, item.code)
    })
}

//修改订单状态
const uapadateOrderStatus = (row: User) => {
    console.log(row.id)
    axios({
        method: "post",
        url: `http://localhost:8080/updateState`,
        headers: {
            "Content-Type": "application/json",
        },
        data: { id: row.id },
    }).then((res) => {
        location.reload();
        console.log(res);
    }).catch((err) => {
        console.log(
            "err.response.data",
            err.response,
            err.response.data,
            err.response.data.data,
            err.response.data.msg
        );
    });
}

const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}


const addNumbe = (index: number, row: User) => {

}

// 查看
const handleEdit = (index: number, row: User) => {
    console.log(index, row)
}


// 初始化数据
const initData = () => {
    axios({
        method: "get",
        url: `http://localhost:8080/selorders`,
        headers: {
            "Content-Type": "application/json",
        },
        data: {},
    }).then((res) => {
        console.log(res)
        tableData.value = res.data.data;
        num.value = res.data.data.map(i => 1);
    }).catch((err) => {
        console.log(
            "err.response.data",
            err.response,
            err.response.data,
            err.response.data.data,
            err.response.data.msg
        );
    });
}
initData();
</script>
